<template>
  <div class="m-head">
    <div class="line flex-between">
      <div class="logo-box flex-left">
        <img :src="logo" class="logo" />
        <span>{{title}}</span>
      </div>
      <m-nav></m-nav>
    </div>
    <m-search v-if="!isContact"></m-search>
  </div>
</template>

<script>
import mNav from "../../components/mobile/Nav";
import mSearch from "../../components/mobile/Search";
export default {
  components: {
    mNav,
    mSearch
  },
  computed: {
    isContact() {
      return this.$route.path === "/contact";
    },
    logo() {
      return require(`../../assets/img/logo${process.env.VUE_APP_LOGO_URL}`);
    },
    title() {
      return process.env.VUE_APP_BRAND_NAME;
    },
    routes() {
      return this.$route.path;
    }
  }
};
</script>

<style lang="scss" scoped>
.m-head {
  height: 113px;
  background: $white;
  .line {
    width: 342px;
    margin: 0 auto;
    padding-top: 14px;
    .logo-box {
      .logo {
        width: 30px;
        margin-right: 10px;
      }
      span {
        font-size: 18px;
        font-weight: 550;
        color: #b7b7ad;
      }
    }
  }
}
</style>